
@import '@/assets/css/basics.scss';
.layout-container{
  //侧边工具栏
  .layout-aside{
    width: auto !important;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    .title{
      min-height: $height-aside-tilte;
      line-height: $height-aside-tilte;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      transition: all 0.3s;
      .logoimg {
        width: $width-aside-img;
        height: $height-aside-img;
        background: #fff;
        padding: 3px;
        border-radius: 50%;
        margin-left: 10px;
        margin-right: 10px;
      }
      .tit-text{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
        font-size: 20px;
        margin-right: 10px;
      }
    }
    
    .aside{
      .el-menu {
        border-right: none;
        .el-sub-menu__title {
          padding: 0 var(--el-menu-base-level-padding);
          .subMenu{
            display: flex;
            align-items: center;
          }
        }
        
      }
    }
  }
  .mobile.openside {
    .shadowBg {
      background: #000;
      opacity: .3;
      width: 100%;
      top: 0;
      height: 100%;
      position: absolute;
      z-index: 999;
      left: 0;
    }
    .layout-aside{ //mobile 下，打开侧边栏动画
      position: fixed;
      -webkit-transition-duration: .5s;
      transition-duration: .5s;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .mobile.hideside {
    .layout-aside{ //mobile 下，关闭侧边栏动画
      position: fixed;
      -webkit-transition-duration: .5s;
      transition-duration: .5s;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
  }


  //头部工具栏
  .layout-header{
    height: auto;
    padding: 0;
    .layout-header-row{
      height: 60px;
      padding: 0 16px;
      .el-col{
        display: flex;
        align-items: center;
      }
      .menu-total {
        margin-left: 6px;
        cursor: pointer;
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 30px;
        
      }
      .breadcrumb {
        padding: 0;
        margin-left: 16px;
        font-size: 16px;
        .el-breadcrumb__item {
            .el-breadcrumb__inner {
                color: rgba($color: #000000, $alpha: 0.45);
            }
        }
        .el-breadcrumb__item:nth-last-child(1) {
            .el-breadcrumb__inner {
                color: rgba($color: #000000, $alpha: 0.65);
            }
        }
      }
      .header-user-info{
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    
  }

  //主面板
  .layout-main{
    height: 100vh;
    padding: 0;
    background: #f0f2f5;
  }
}